<template>
    <div class="main">
        <div class="slogan">
            清华数发
        </div>
        <div class="form">
            <h2>欢迎登录</h2>
            <el-form style="height: 100%;" label-width="auto" label-position="right">
                <el-form-item label="用户名">
                    <el-input v-model="param.loginName" placeholder="请输入用户名" @keydown.enter="submit"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="param.password" type="password" placeholder="请输入密码"
                        @keydown.enter="submit"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue';
import { post } from '@/request/axiosset'
import { useRouter } from 'vue-router'
import { useStore } from '@/stores/index'
import { ElMessage } from 'element-plus';

const store = useStore()
const router = useRouter()
const param = reactive({
    loginName: '',
    password: ''
})
// const rules = reactive({
//     loginName: [{ validator: validatePass, trigger: 'blur' }],
//     password: [{ validator: validatePass, trigger: 'blur' }],
// })
// const validatePass = (rule, value, callback) => {
//     if (value === '') {
//         callback(new Error('Please input the password'))
//     } else {
//         if (ruleForm.checkPass !== '') {
//             if (!ruleFormRef.value) return
//             ruleFormRef.value.validateField('checkPass')
//         }
//         callback()
//     }
// }


function submit() {
    if (Object.values(param).some(i => !i)) {
        // if (param.loginName === '' || param.password === '') {
        return ElMessage.error('请输入账号密码')
    }
    post('/user/login', param).then(res => {
        // console.log(res)
        if (res.data.code === 200) {
            ElMessage.success('登录成功')
            store.token = res.data.data.tgc
            router.push('home')
        }
    })
}
</script>

<style scoped>
.main {
    width: 100vw;
    height: 100vh;
    background: url(/bg.png) no-repeat -50vw 50% / cover,
        #11111111;

    .slogan {
        position: fixed;
        inset: 20px 50px;
        color: #FFF;
        font-size: 24px;
    }

    .form {
        position: fixed;
        right: 18vw;
        top: 25vh;
        padding: 90px 30px;
        background-color: #fff;
        box-shadow: rgba(0, 0, 0, 0.45) 0 25px 20px -20px;
        border-radius: 5px;

        h2 {
            margin-bottom: 30px;
        }

        .el-button {
            width: 100%;
            margin-top: 20px;
        }
    }
}
</style>
